<template>
    <alertBox data-title="发送薪资单" :isCloseType="true">
        <div class="process">
            <div :class="[whichStep === 0 ? 'active' : '','process-box']">
                <div class="no">
                    <i class="el-icon el-icon-check" />
                </div>
                <span>上传文件</span>
            </div>
            <div class="arrow">
                <i class="el-icon el-icon-arrow-right" />
            </div>
            <div :class="[whichStep === 1 ? 'active' : '','process-box']">
                <div class="no">
                    2
                </div>
                <span>确认信息</span>
            </div>
            <div class="arrow">
                <i class="el-icon el-icon-arrow-right" />
            </div>
            <div :class="[whichStep === 2 ? 'active' : '','process-box']">
                <div class="no">
                    3
                </div>
                <span>查看结果</span>
            </div>
        </div>
        <div class="box-block form" v-if="whichStep === 0">
            <el-upload
                class="upload-demo"
                drag
                :action= 'uploadAction'
                :headers="{Authorization:'Bearer' + ' ' + global.token}"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                :on-success="fileSuccess"
                :on-error="fileEerror"
                :show-file-list='false'
            >

            <div class="row">
                <div class="row">
                    <div class="key">
                        <span class="important">*</span>
                        <span>发薪数据</span>
                    </div>
                    <div class="value" style="
                        display: flex;
                        align-items: center;
                    ">
                         <button class="btn import-btn">
                            <i class="el-icon el-icon-upload2" />导入
                        </button>
                        <div class="tipsText">
                            或拖拽至此处
                        </div>
                        <a
                            class="down-templete"
                            href="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/template/template_stub.xlsx"
                            @click.stop="()=>{return}"
                            >模板下载</a
                        >
                    </div>
                </div>
                <div></div>
            </div>
            <div class="row">
                <div class="row">
                    <div class="key">
                        <span class="important">*</span>
                        <span>名称：</span>
                    </div>
                    <div class="value" >
                        <el-input @click.stop="()=>{return 0}" placeholder="请输入名称" name="processaName" v-model="processaName"/>
                    </div>
                </div>
                <div class="row">
                    <el-form label-position="left" label-width="100px">
                        <span class="important">*</span>
                        <el-form-item label="派遣单位名称" >
                            <el-select v-model="enterpriseName" filterable  placeholder="请选择派遣单位">
                                <el-option :label="item.serveCompanyName" :value="item.serveCompanyName" v-for="(item,index) in enterpriseList" v-bind:key="index" @click="enterpriseDropdown(item.id)">{{ item.serveCompanyName }}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="row">
                <div class="row" >
                    <div class="key" >
                        <span class="important">*</span>
                        <span>年月</span>
                    </div>
                    <div class="value" @click.stop="()=>{return 0}">
                        <el-date-picker
                            v-model="timeMonth"
                            type="month"
                            format="YYYY-MM"
                            value-format="YYYY-MM"
                            placeholder="请选择月份"
                            style="width:240px"
                            @click="()=>{return}"
                        >
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row">
                    <div class="key">
                        <span class="important">*</span>
                        <span>总金额</span>
                    </div>
                    <div class="value">
                        <el-input placeholder="上传表单后自动填充" disabled name="totalAmount" v-model="totalAmount"/>
                    </div>
                </div>
                <div class="row">
                    <div class="key">
                        <span class="important">*</span>
                        <span>总人数</span>
                    </div>
                    <div class="value">
                        <el-input placeholder="上传表单后自动填充" disabled name="totalNumber" v-model="totalNumber"/>
                    </div>
                </div>
            </div>
            <button class="btn mini-btn" @click.stop="onUploadFileNext" v-if="!errorList.length">下一步</button>
            </el-upload>
        </div>
         <div class="form-error" v-if="errorList.length">
         <el-alert :title="`本次上传文件共发现${errorList.length}处错误,请修改后重新上传`" type="error" center show-icon/>
         <div class="error-table">
             <el-table :data="errorList" :header-row-style="{ color: 'black',}" :row-style="{ border:'none'}">
                 <el-table-column label="行号" :formatter="row => (row.rowNumber)" width="100px" />
                 <el-table-column prop="0" label="姓名" width="100px" />
                 <el-table-column prop="1" label="身份证号" width="200px" />
                 <el-table-column prop="errorDetail" label="错误提示" />
             </el-table>
         </div>
         </div>
        <!-- 确认发薪 -->
        <div class="box-block enclosure" v-if="whichStep === 1">
            <div class="form-left">
                <div class="info-title">
                    发薪数据单
                </div>
                <div>
                    <img src="@/assets/xlsx/xlsx-template.png" class="xlsx-img"/>
                </div>
            </div>
            <div class="form-right">
                <div class="info-title">
                    确认信息
                </div>
                <div class="info-enclosure-name parallel">
                    <div class="info-left">
                        附件名称：
                    </div>
                    <div class="info-right">
                        {{ fileName }}
                    </div>
                </div>
                <div class="info-name parallel">
                    <div class="info-left">
                       名称：
                    </div>
                    <div class="info-right">
                        {{ processaName }}
                    </div>
                </div>
                <div class="info-month parallel">
                    <div class="info-left">
                        年月：
                    </div>
                    <div class="info-right">
                        {{ timeMonth }}
                    </div>
                </div>
                <div class="info-pay-enterprise parallel ">
                    <div class="info-left">
                        发薪派遣单位：
                    </div>
                    <div class="info-right">
                        {{ enterpriseName }}
                    </div>
                </div>
                <div class="info-people-num parallel">
                    <div class="info-left">
                        总人数：
                    </div>
                    <div class="info-right">
                        {{ totalNumber }}人
                    </div>
                </div>
                <div class="info-total-money parallel">
                    <div class="info-left">
                        总金额：
                    </div>
                    <div class="info-right info-right-num">
                        ￥{{ totalAmount }}
                    </div>
                </div>
                <div class="parallel" style="justify-content: space-between">
                    <button class="btn-white" @click="whichStep-=1">重新选择</button>
                    <button class="btn" @click="onAddBatchPay">确认添加</button>
                </div>
            </div>
        </div>
        <div class="box-block result" v-if="whichStep === 2">
            <img src="@/assets/xlsx/success.png" alt="" class="result-success"/>
            <div class="result-title">
                发放成功
            </div>
            <!-- <div class="result-name">
                预计两小时内到账
            </div> -->
            <button class="btn" @click="onCloseEject">返回列表</button>
            <div class="result-info">
                <div class="info-enclosure-name parallel">
                    <div class="info-left">
                        附件名称：
                    </div>
                    <div class="info-right">
                        {{ fileName }}
                    </div>
                </div>
                <div class="info-name parallel">
                    <div class="info-left">
                       名称：
                    </div>
                    <div class="info-right">
                        {{ processaName }}
                    </div>
                </div>
                <div class="info-month parallel">
                    <div class="info-left">
                        年月：
                    </div>
                    <div class="info-right">
                        {{ timeMonth }}
                    </div>
                </div>
                <div class="info-pay-enterprise parallel ">
                    <div class="info-left">
                        发薪派遣单位：
                    </div>
                    <div class="info-right">
                        {{ enterpriseName }}
                    </div>
                </div>
                <div class="info-people-num parallel">
                    <div class="info-left">
                        总人数：
                    </div>
                    <div class="info-right">
                        {{ totalNumber }}人
                    </div>
                </div>
                <div class="info-total-money parallel">
                    <div class="info-left">
                        总金额：
                    </div>
                    <div class="info-right info-right-num">
                        ￥{{ totalAmount }}
                    </div>
                </div>
            </div>
        </div>
    </alertBox>
</template>

<script lang="ts" setup>
import alertBox from './alert-box.vue'
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { getEnterpriseNameList, EnterpriseDto } from '@/api/enterprise'
import global from '@/utils/global'
import { postPayroll } from '@/api/payroll'
interface objEntDto {
    [key:string]:string | number
}
export default defineComponent({
    props: ['isType'],
    created () {
        this.getEnterpriseNameList()
        console.log(process.env.VUE_APP_BASE_URL + '/rest/pay-stub/importData2List', '路径路径')
    },
    data () {
        return {
            uploadAction: process.env.VUE_APP_BASE_URL + '/rest/pay-stub/importData2List', // 导入的路径
            whichStep: 0,
            processaName: '', // 流程名称
            enterpriseName: '', // 派遣单位名称
            enterpriseId: '', // 派遣单位Id
            totalNumber: '', // 总人数
            totalAmount: '', // 总金额
            enterpriseList: [] as EnterpriseDto[], // 派遣单位列表
            fileName: '' as string, // 附件名称
            timeMonth: '', // 选择的月
            bodyData: [] as objEntDto[], // 工资单导入返回的列表
            errorList: [] as {
                1: string
                rowNumber: number
                0: string
            }[], // 错误数据列表
            headerData: [] as { index: number;key: string; value: string; }[] // 工资单导入返回的台头
        }
    },
    methods: {
        // 查询公司下派遣单位列表
        async getEnterpriseNameList () {
            const result = await getEnterpriseNameList()
            this.enterpriseList = result.list
        },
        enterpriseDropdown (id:string) {
            this.enterpriseId = id
        },
        onUploadFileNext () {
            if (!this.timeMonth) {
                this.$message.warning('请选择年月')
                return
            }
            if (!this.processaName) {
                this.$message.warning('请输入流程名称')
                return
            }
            if (!this.enterpriseName) {
                this.$message.warning('请选择派遣单位名称')
                return
            }
            if (!this.totalNumber) {
                this.$message.warning('请导入文件')
                return
            }
            this.whichStep = 1
        },
        fileSuccess (response:{code:number, msg:string, data:{totalMoney:string, totalPerson:string, headerData:[{ index: number, key: string, value: string }], bodyData:[{ index: number; key: string; value: string; }], errorBodyData: { 1: string, rowNumber: number, 0: string }[]}}, file:{raw:{name:string}}) {
            if (response.code === 500) {
                this.$message.error(response.msg)
                return
            }
            response.data.errorBodyData.map((index:any) => {
                index[1] = index[1].replace(/(.{3})(?:\d+)(.{4})$/, '$1*********$2')
            })
            this.fileName = file.raw.name
            this.totalAmount = response.data.totalMoney
            this.totalNumber = response.data.totalPerson
            this.errorList = response.data.errorBodyData
            this.bodyData = response.data.bodyData
            this.headerData = response.data.headerData
        },
        fileEerror () {
            this.$message.error('文件上传失败')
        },
        async onAddBatchPay () {
            await postPayroll({
                name: this.processaName,
                totalMoney: this.totalAmount,
                peopleNum: this.totalNumber,
                serveCompanyId: this.enterpriseId,
                serveCompanyName: this.enterpriseName,
                month: this.timeMonth,
                bodyInfo: this.bodyData,
                headerList: this.headerData
            })
            this.whichStep += 1
        },
        onCloseEject () {
            this.$emit('close')
            this.$emit('complete')
        }
    }
})
</script>

<style scoped lang="stylus">
// 弹窗样式
eject()
ejectFrom()
:deep() .el-upload-dragger
    width 100%
    height 100%
    border-color transparent
:deep().el-upload.el-upload--text
    width 100%
.tipsText
    margin-left 10px
.el-table>>>.warm-row {
  background #fdf6ec
  color white
}
.form-error {
    background-color: #F5F5F7;
    .error-table{
        padding: 16px 24px;
    }
}
.el-table {
    --el-table-border-color: none;
}
</style>
